<template>
    <div class="modal fade" id="mobileCompleted" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel"> 号码补全</h4>
          	</div>
          	<div class="modal-body">
				<div class="row">
				  	<div class="form-group col-md-6 col-md-offset-3	">
				  		<span style="float: left;font-size:20px;"> {{completeNum.mobilePrefix}}</span>
					    <input type="text" class="col-lg-2 input-sm" maxlength="1" style="font-size:20px; border-color: orange;" v-model="userTel.numA ">
					    <input type="text" class="col-lg-2 input-sm" maxlength="1" style="font-size:20px; border-color: orange;" v-model="userTel.numB ">
					    <input type="text" class="col-lg-2 input-sm" maxlength="1" style="font-size:20px; border-color: orange;" v-model="userTel.numC ">
					    <input type="text" class="col-lg-2 input-sm" maxlength="1" v-show="starCount == 4" style="font-size:20px;border-color: orange;" v-model="userTel.numD ">
					    <span style="font-size:20px;">{{completeNum.mobileSuffix}}</span>
					    <input type="tel" :maxlength="starCount" class="number-input-box" v-model="completeNum.helfTel">
					</div>
				</div>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn"  @click="saveMobile">确定</button>
				<button type="button" class="btn btn-default"  data-dismiss="modal">取消</button>
          	</div>
        </div>
      </div>
    </div>
</template>
<style scoped="scoped">
	.number-input-box {
	    position: absolute;
	    height: 30px;
	    left: 38px;
	    width: 200px;
	    opacity: 0;
	}
</style>
<script>
	export default{
        props: ["mobileCompleteModal"],
		data() {
			return {
				//机构信息对象
				params: {
				    id:'',
                    mobile:''
				},
				completeNum:{
		      		modelShow: false,
		      		helfTel: '',
		      		mobilePrefix: '',
		      		mobileSuffix: '',
		      		row: {}
				},
				starCount: 0
			}
		},
		computed: {
			userTel () {
		      	let numA,numB,numC,numD
		      	if ((this.completeNum.helfTel).length > 0) {
			        numA = this.completeNum.helfTel.substring(0,1); 
			        numB = this.completeNum.helfTel.substring(1,2);
			        numC = this.completeNum.helfTel.substring(2,3);
					numD = this.completeNum.helfTel.substring(3,4);
		      	}
		      	return {
		        	numA,numB,numC,numD
		      	}
		    }
		},
		mounted:function(){
		},
		watch:{
			mobileCompleteModal:{
				handler:function(newVal,oldVal){
					this.showCompleteNumModel(newVal);
				},
				deep:true
			}
		},
		methods: {
			showCompleteNumModel(row){
				//补全号码
				var _self = this;
				_self.completeNum.modelShow = true;
				//号码前三后四
				let start = row.mobile.indexOf("*");
				let end = row.mobile.lastIndexOf("*") + 1;
				_self.starCount = end - start;
				_self.completeNum.mobilePrefix = row.mobile.substring(0,start);
				_self.completeNum.mobileSuffix = row.mobile.substring(end);
				_self.completeNum.row = row
			},
            saveMobile: function() {
            	var _self = this;
				var curPreId = _self.completeNum.row.id;
				var wholeMobile = _self.completeNum.mobilePrefix + _self.completeNum.helfTel + _self.completeNum.mobileSuffix;
				if(!wholeMobile||wholeMobile.length!=11){
					layer.msg("手机号不全，请补充完整");
					return false;
				}
				var body = {};
				body.params = {
					id : curPreId,
					mobile : wholeMobile
				};
				var url = _self.utilHelper.apiUrl + "/api/completePhone";
				_self.$http.post(url, body).then((response) => {
					var data = response.body.resData;
					var result = data.result;
					var errorMsg = data.resultMsg;
					if("1" == result){
						layer.msg('操作成功!');
						_self.completeNum.helfTel = '';
						$('#mobileCompleted').modal('hide');
						_self.$emit('saveMobileListener');
					}else{
						layer.msg(errorMsg);
					}
				});
			}
		}
	}
	
</script>

